<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>键盘</title>
    <link rel="stylesheet" href="./layui/css/layui.css"  media="all">
	
</head>
<body>

	<div id="keyboard" style="width: 1000px;height: 300px;margin:0 auto;"></div>
	<!-- <div id="keyboard1" style="width: 1000px;height: 300px;outline: 1px solid red;margin:0 auto;"></div> -->

</body>
<script src="./layui/layui.js"></script>
<script type="text/javascript">
		layui.config({
			base: 'plugin/'
		}).use(['jquery', 'keyboard'], function() {
			var $ = layui.jquery,
				keyboard = layui.keyboard;
				
				var k=keyboard.render({
					elem:"keyboard"
				});
				k.keys(["j","o"]);
				k.fn(["Key-5"]);
				k.shift(["Key-0"]);
			
		});
	</script>
</html>